<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="../vue/vue-v2.6.10.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <el-button @click="addUI" type="primary">新增</el-button>
    <!--
        :data： 绑定表格对应的数据
        stripe; 是否斑马纹显示
    -->
    <el-table :data="tableData" stripe style="width: 100%">
        <!--
         type="index" ：类型为行的索引
         label： 表头

        注意：索引不是集合中的id
        -->
        <el-table-column
                type="index"
                label="序号"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="name"
                label="商品名称"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格" align="center">
        </el-table-column>
        <el-table-column
                prop="stock"
                label="库存" align="center">
        </el-table-column>
        <el-table-column
                prop="typeName"
                label="分类" align="center">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <!--
                slot-scope：作用域插槽，可以获取表格数据
                scope：代表表格数据(tableData)
                可以通过scope.row来获取表格当前行数据，scope不是固定写法
                @click：绑定vue中的方法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        分页组件
          @size-change： 当改变每页条数时触发的钩子函数
          @current-change：当改变页码时触发的钩子函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            current-page="1"
            :page-sizes="[1,3, 5, 8, 10]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <!--添加商品的弹窗-->
    <!--@close : 关闭窗口时回调-->
    <el-dialog title="添加商品" :visible.sync="dialogTableVisible">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="name">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" style="text-align: left;">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input  v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model.number="formData.stock" precision="2"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="typeId">
                <el-select v-model="formData.typeId" placeholder="请选择商品类型">
                    <el-option v-for="t in types" :label="t.name" :value="t.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="add('addForm')">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改商品的弹窗-->
    <!--@close : 关闭窗口时回调-->
    <el-dialog title="修改商品" :visible.sync="dialogTableVisible4Edit" >
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="name">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" style="text-align: left;">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input  v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model.number="formData.stock" precision="2"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="typeId">
                <el-select v-model="formData.typeId" placeholder="请选择商品类型">
                    <el-option v-for="t in types" :label="t.name" :value="t.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="edit('addForm')">修改</el-button>
                <el-button @click="resetForm('editForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<style type="text/css">
    /* 设置分页组件在右侧显示 */
    .el-pagination{
        text-align: right;
        padding: 15px;
    }
</style>
<script src="../vue/axios-0.18.0.js"></script>
<script type="text/javascript">
    //自定义价格的校验规则
    var checkPrice = (rule, value, callback) => {
        //正则表达式： 必须是正整数或者是正浮点数
        var pattern = /^\d+(\.\d+)?$/;
        if (!pattern.test(value)) {
            callback(new Error('请输入整数或者小数！！'));
        } else {
            callback();
        }
    };
    new Vue({
        el: "#app",
        data:{
            tableData:[] ,// 表格中要展示的数据集合
            pagination:{ //分页参数
                currentPage: 1,
                pageSize:5,
                total: 0
            },
            formData:{}, //对应新增和编辑的表单数据
            dialogTableVisible:false , //新增窗口的显示与隐藏
            dialogTableVisible4Edit:false, //编辑窗口的显示与隐藏
            types: [], // 商品分类列表数据（在下拉菜单中显示）
            rules: { //校验规则
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                    { validator: checkPrice, trigger: 'blur' }
                ],
                stock: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' },
                    { type: 'number', message: '库存数量只能是数字', trigger: 'blur' }
                ],
                typeId: [
                    { required: true, message: '请选择商品分类', trigger: 'change' }
                ]
            }
        },
        //钩子函数，在创建vue对象完成后执行
        created(){
            //创建vue后，分页查询数据
            this.findByPage();
        },
        methods: {
            /**
             * 根据id删除商品
             *  
             */
            handleDelete(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("删除商品... id:",row.id);
                }).catch(() => {
                    //点击取消时执行
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /**
             * 修改
             * 
             */
            edit(){
               
            },
            /**
             * 编辑商品回显
             * 
             */
            handleUpdate(row){

               
            },

            /**
             * 新增回显
             *  
             */
            addUI(){
                console.log("addUI...弹出新增商品窗口");
            },
            /**
             * 添加
             *
             * @param formName
             */
            add(){
                //valid ：校验的结果：true || false
                this.$refs['addForm'].validate(valid=>{
                    if(valid){
                        console.log("提交表单...this.formData:",this.formData);
                    }else{
                        return;
                    }
                });
            },
            //重置表单
            resetForm(formName){
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                if( this.$refs[formName]){
                    //清除表单的校验数据
                    this.$refs[formName].resetFields();
                }
            },
            //分页查询
            findByPage(){
                // 发出的get请求效果：
                console.log("findByPage...获取分页商品列表");
            },

            //改变每页条数时执行的钩子
            handleSizeChange(pageSize){
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.findByPage();
            },
            //改变页码时执行的钩子
            handleCurrentChange(currentPage){
                //修改分页查询的参数
                this.pagination.currentPage = currentPage;
                //重新执行查询
                this.findByPage();
            }

        }

    });
</script>
</html>